<template>
  <nav>
    <div id="header">
      <img src="@/assets/images/2.png" alt="" />
      <p>购物车</p>
    </div>
    <hr />
  </nav>
  <div id="back" @click="$router.push('/')">
    <img src="@/assets/images/back.png" alt="" />
  </div>
  <div class="shop-cart">
    <div class="lists">
      <div class="header">
        <ul class="clearfix">
          <li>
            <input
              type="checkbox"
              class="select-all"
              v-model="allChecked"
              @change="changeAll()"
            />
            <label>全选</label>
          </li>
          <li class="product-info">商品信息</li>
          <li>单价</li>
          <li>数量</li>
          <li>金额</li>
          <li>操作</li>
        </ul>
      </div>
      <div id="shoplist" class="shoplist" v-show="shown">
        <div class="shop" v-show="showp1">
          <div class="shop-info">
            <span class="shop-tip"
              ><img src="@/assets/images/shop1.png" /> 店铺：</span
            >
            <a class="shop-name" href="#">天天开心蔬果商铺</a>
          </div>
          <div class="products">
            <div class="item">
              <div class="select-logo">
                <input type="checkbox" @change="changeS()" v-model="checked" />
                <span
                  ><img src="@/assets/images/instagram-img-06.jpg" alt=""
                /></span>
              </div>
              <div class="product-detail">
                <div class="right">
                  <p>名称：车厘子</p>
                  <p>水果价格：39.9元/kg</p>
                  <p>来源地：中国甘肃</p>
                  <p>月销量：1000}kg</p>
                  <p>售后说明：次日送达|极速退款|72小时品质无忧</p>
                </div>
              </div>
              <div class="price">
                <p class="market-price">50.9元</p>
                <p class="real-price">￥30元</p>
              </div>
              <div class="count">
                <span class="sub" @click="sub">-</span>
                <span class="input"
                  ><input type="text" v-model="number.conut1"
                /></span>
                <span class="add" @click="add">+</span>
              </div>
              <div class="amount">￥{{ number.conut1 * 30 }}元</div>
              <div class="delete">
                <a href="#"><p @click="del1()">删除</p></a>
              </div>
            </div>
          </div>
        </div>

        <div class="shop" v-show="showp2">
          <div class="shop-info">
            <span class="shop-tip"
              ><img src="@/assets/images/shop1.png" /> 店铺：</span
            >
            <a class="shop-name" href="#">{{ goods.shopName }}</a>
          </div>
          <div class="products">
            <div class="item">
              <div class="select-logo">
                <input type="checkbox" @change="changeS()" v-model="checked" />
                <span><img :src="goods.imgs" alt="" /></span>
              </div>
              <div class="product-detail">
                <div class="right">
                  <p>名称：{{ goods.goodsName }}</p>
                  <p>水果价格：{{ goods.realprice }}元/kg</p>
                  <p>来源地：{{ goods.address }}</p>
                  <p>月销量：1000kg</p>
                  <p>售后说明：次日送达|极速退款|72小时品质无忧</p>
                </div>
              </div>
              <div class="price">
                <p class="market-price">{{ goods.marketprice }}元</p>
                <p class="real-price">￥{{ goods.realprice }}元</p>
              </div>
              <div class="count">
                <span class="sub" @click="goods.count > 1 ? (goods.count -= 1) : 1">-</span>
                <span class="input"><input type="text" v-model="goods.count"/></span>
                <span class="add" @click="goods.count++">+</span>
              </div>
              <div class="amount">￥{{ goods.count*goods.realprice }}元</div>
              <div class="delete">
                <a href="#"><p @click="del(goods)">删除</p></a>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="operate">
      <div class="left">
        <a href="javascript:void(0);" @click="delAll()">清空</a>
      </div>
      <div class="right">
        <div>
          已选择商品<span class="selected-count">{{ counts }}</span
          >份
        </div>
        <div class="amount">
          合计（不含运费）： <span class="sum">{{ prices }}元</span>
        </div>
        <a href="javascript:void(0);" class="settle" @click="toPay()">结算</a>
      </div>
    </div>
  </div>

  <!-- 弹窗支付 -->
  <transition>
    <div class="el-overlay is-message-box" v-if="pageShow">
      <div class="addpage">
        <my-pay @closeclick="closeclick"></my-pay>
      </div>
    </div>
  </transition>
</template>

<script>
import { useRoute } from 'vue-router'
import { reactive, ref, computed, onMounted } from 'vue'
import MyPay from './popWindows/myPay.vue'
import { ElMessage, ElMessageBox } from 'element-plus'
export default {
  name: 'carView',
  components: { MyPay },
  setup (props, context) {
    const goods = ref([
      { imgs: '' },
      { realprice: '' },
      { shopName: '' },
      { goodsName: '' },
      { address: '' },
      { marketprice: '' },
      { count: '' }
    ])

    const router = useRoute()
    // const goods = reactive({imgs:"",realprice:"",shopName:"",goodsName:"",address:"",marketprice:"",count:""})
    onMounted(() => {
      goods.value.imgs = JSON.parse(router.query.data1).imgs
      goods.value.realprice = JSON.parse(router.query.data1).realprice
      goods.value.shopName = JSON.parse(router.query.data1).shopName
      goods.value.goodsName = JSON.parse(router.query.data1).goodsName
      goods.value.address = JSON.parse(router.query.data1).address
      goods.value.marketprice = JSON.parse(router.query.data1).marketprice
      goods.value.count = JSON.parse(router.query.data1).count
      console.log(router.query.data1)
    })
    // 清空
    const shown = ref(true)
    const showp = ref(true)
    function delAll () {
      ElMessageBox.confirm('确认清空购物车?', 'Warning', {
        confirmButtonText: '确认',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          goods.value = ''
          shown.value = false
          ElMessage({
            type: 'success',
            message: '清空成功！'
          })
        })
        .catch(() => {
          ElMessage({
            type: 'info',
            message: '清空失败！'
          })
        })
    }
    const number = reactive({ conut1: 1 })
    function sub () {
      // eslint-disable-next-line no-unused-expressions
      number.conut1 > 1 ? (number.conut1 -= 1) : 1
    }
    function add () {
      number.conut1 += 1
    }

    // 全选
    const checked = ref(true)
    const allChecked = ref(true)
    function changeAll () {
      if ((allChecked.value)) {
        checked.value = true
      } else {
        checked.value = false
      }
    }
    // 选中商品
    const num = ref(0)
    function changeS () {
      const num = goods.value.filter(() => { return checked.value }).length
      if (num == goods.value.length) {
        allChecked.value = true
      } else {
        allChecked.value = false
      }
    }
    // 计算总价
    const prices = computed(() => {
      let total = 0
      if ((checked.value)) {
        total += (goods.value.count * goods.value.realprice + number.conut1 * 30)
      }
      return total
    })
    // 计算总数
    const counts = computed(() => {
      let countall = 0
      if ((checked.value)) {
        countall += (goods.value.count * 1 + number.conut1 * 1)
      }
      return countall
    })

    // 商品删除
    const showp1 = ref(true)
    function del1 () {
      showp1.value = false
    }
    const showp2 = ref(true)
    function del (goods) {
      showp2.value = false
      // goods.value.splice(goods.value.indexOf(goods),1);
    }

    // 弹窗
    const pageShow = ref(false)
    const num1 = ref(0)
    function toPay () {
      const num1 = goods.value.filter(() => {
        return checked.value
      }).length
      if (num1 > 0) {
        pageShow.value = true
      } else {
        alert('未选择商品')
      }
    }
    // 关闭弹窗
    function closeclick (isclose) {
      if (isclose === false) {
        pageShow.value = false
      }
    }

    return {
      delAll,
      goods,
      number,
      sub,
      add,
      del,
      changeAll,
      allChecked,
      prices,
      counts,
      num,
      changeS,
      pageShow,
      num1,
      toPay,
      closeclick,
      checked,
      shown,
      showp,
      showp1,
      del1,
      showp2
    }
  }
}
</script>

    <style scoped>
nav {
  background-color: black;
}
#back > img {
  width: 40px;
  height: 40px;
  position: absolute;
  margin-top: 10px;
  margin-left: 20px;
  cursor: pointer;
}
#header > img {
  margin: 10px;
}
#header > p {
  font-size: 35px;
  font-weight: bolder;
  color: #b0b436;
  position: absolute;
  margin-left: 100px;
  margin-top: -60px;
}
hr {
  height: 4px;
  background-color: #b0b436;
  /* margin-top: 50px; */
}
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
ul {
  list-style: none;
}
.shop-cart {
  width: 990px;
  margin: 10px auto;
  /* border: 1px solid red; */
  /* background-color:rgb(199, 202, 40, 0.5); */
  user-select: none;
}
.lists .header ul {
  font-weight: bolder;
  height: 50px;
  line-height: 50px;
  color: #6e710b;
}

.lists .header ul li {
  float: left;
}

.lists .header ul li:not(.product-info) {
  width: 125px;
}

.lists .header ul li.product-info {
  width: calc(990px - (125px * 5));
}

.lists .shop .products {
  border: 1px solid #ccc;
  margin: 10px;
}

.lists .shop .products .item {
  display: flex;
  padding: 20px 10px;
  border-bottom: 1px solid #eee;
}

.lists .shop .products .item .select-logo {
  display: flex;
}

.lists .shop .products .item .select-logo img {
  width: 110px;
  height: 120px;
  margin-left: 3px;
}

.lists .shop .products .item .product-detail {
  width: calc(990px - (125px * 5));
  display: flex;
  margin-left: 18px;
}
.lists .shop .products .item > div:not(.product-detail) {
  width: 128px;
}

.lists .shop .products .item .price p {
  margin: 4px 0;
}

.lists .shop .products .item .price p.market-price {
  color: #9c9c9c;
  text-decoration: line-through;
}
.lists .shop .products .item .count span.sub,
.lists .shop .products .item .count span.add {
  background-color: #d9d9d9;
  width: 17px;
  border: 1px solid #e5e5e5;
}

.lists .shop .products .item .count span.sub:hover,
.lists .shop .products .item .count span.add:hover {
  color: #ff4400;
  border-color: #ff4400;
}

.lists .shop .products .item .count span.input {
  border: 1px solid #aaa;
}

.lists .shop .products .item .count span.input input {
  width: 40px;
  height: 21px;
  text-align: center;
  border: none;
}

.lists .shop .products .item .amount {
  color: #ff4400;
  font-weight: bold;
  font-size: 14px;
  margin-top: 30px;
}
.lists .shop .products .item .count,
.delete {
  margin-top: 30px;
}

.lists .shop .products .item .delete a {
  color: #3c3c3c;
  text-decoration: none;
}

.operate {
  height: 50px;
  background-color: #ecefb7;
  margin-top: 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: #585a1e;
  position: sticky;
  bottom: 0;
  left: 0;
}

.operate .left {
  padding-left: 10px;
}

.operate .left a {
  text-decoration: none;
  color: #6b6d22;
  font-weight: bolder;
  margin-left: 30px;
  font-size: 18px;
}

.operate .left a:hover {
  text-decoration: underline;
  color: #ff4400;
}

.operate .right {
  display: flex;
  justify-content: end;
  align-items: center;
}

.operate .right .amount {
  margin-left: 40px;
}

.operate .right .selected-count,
.operate .right .sum {
  color: #ff4400;
  font-size: 18px;
  font-weight: 600;
  margin: 0 5px;
}

.operate .right a {
  height: 50px;
  line-height: 50px;
  width: 120px;
  background-color: #b0b436;
  text-align: center;
  text-decoration: none;
  color: #fff;
  font-size: 20px;
}

.operate .right a.active {
  background-color: #ff4400;
}

.operate .right a.active:hover {
  background-color: #f22d00;
}
.active1 {
  background-color: rgb(236, 213, 217);
}
input {
  width: 18px;
  height: 18px;
  text-align: center;
}
.shop-name {
  text-decoration: none;
  color: #30302e;
  font-weight: bolder;
}
.shop-info {
  margin-top: 20px;
  margin-left: 45px;
}
.right > p {
  margin-bottom: 8px;
  color: rgb(78, 76, 76);
  font-size: 14px;
}
.shop-tip > img {
  width: 30px;
  height: 30px;
  position: absolute;
  margin-left: -35px;
  margin-top: -5px;
}
.addpage {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
</style>
